<!doctype html>
<html>
<head>
    <title>Angular Paging Directive</title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <style>
        body {margin-bottom: 50px;}
        li {padding: 5px}
        hr {margin: 50px 0}
        table { width: 100%; margin-bottom: 20px}
        table td {padding: 10px 4px; border-bottom: solid 1px #eee}
        .well hr {margin: 30px 0 30px}
        .jumbotron h2 {margin-top: 0}
        .text-muted {margin-bottom: 20px}
    </style>
</head>
<body>
    
    <div class="jumbotron">
        <div class="container">
            <h2>
                <a target="_blank" href="https://github.com/brantwills/Angular-Paging">
                    Angular Paging
                </a>
            </h2> 
            A directive to aid in paging large datasets while requiring the bare minimum of actual paging information. 
            We are very dependant on the server for "filtering" results in this paging scheme.  The central idea being
            we only want to hold the active "page" of items - rather than holding the entire list of items in memory
            and paging on the client-side.
        </div>
    </div>

    
    <div class="container" ng-app="myApp" ng-controller="sampleCtrl">
            
        <!--[if lt IE 10]>
            <div class="alert alert-warning">
               <strong>
                    It is highly recommended you update Internet Explorer or try using a modern browser!
               </strong> 
            </div>
        <![endif]--> 
        
            



        <h3> Basic Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>The simplest example for the paging directive</li>
            <li>Use the text boxes to adjust directive settings for each example below</li>
            <li>For advanced settings you will need to click the <b>apply</b> button</li>
        </ul>
        <div class="well">
            <div paging
                page="currentPage" 
                page-size="pageSize" 
                total="total">
            </div>  
        </div>
        <div class="well">



            <div class="form-group">
                <label>Current Page:</label>
                <input 
                    placeholder="page" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="currentPage" 
                    ng-init="currentPage = 1"/>
            </div>
            <div class="form-group">
                <label>Page Size:</label> 
                <input 
                    placeholder="Page Size" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="pageSize"
                    ng-init="pageSize = 10"/>
            </div>      
            <div class="form-group">
                <label>Total Items:</label> 
                <input
                    placeholder="Total" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="total" 
                    ng-init="total = 1000"/>
            </div>
        </div>
        <script src="https://gist.github.com/brantwills/3117b5182d12b8feb106.js"></script>
        <hr/>







        
        <h3> OnClick and Href Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>View the console.log to see onClick action</li>
            <li>Notice the URL after clicking a page below</li>
            <li>The text setting <code>{page}</code> will insert the page number in the href</li>
        </ul>
        
        <!-- 
            Notice the second parameter of DoCtrlPagingAct 
            is 'page' not currentPage

            This corresponds to the paging directives 'page' attribute
            You may pass in any number of parameters to your function 
            just be sure that the 'currentPage' parameter is replace with
            the paging directive page attribute

            The pageSize and total attributes are exposed similarly 
            However they share the same name as our controller scope
        -->
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                pg-href="{{pgHref}}"
                adjacent="{{adjacent}}"
                dots="{{dots}}"
                hide-if-empty="{{hideIfEmpty}}"
                show-prev-next="{{showPrevNext}}"
                show-first-last="{{showFirstLast}}"
                paging-action="DoCtrlPagingAct('Paging Clicked', page, pageSize, total)">
            </paging>   
        </div>
        <div class="well">
            <div class="form-group">
                <label>Href:</label> 
                <input
                    placeholder="pgHref" 
                    class="form-control"  
                    maxlength="10"
                    ng-model="pgHref" 
                    ng-init="pgHref = '#GotoPage-{page}'"/>
            </div>
            <div class="form-group">
                <label>Dots Display:</label> 
                <input
                    placeholder="..." 
                    class="form-control"  
                    maxlength="3"
                    ng-model="dots" 
                    ng-init="dots = '...'"/>
            </div>
            <div class="form-group">
                <label>Adjacent Count:</label> 
                <input
                    placeholder="2" 
                    class="form-control"  
                    maxlength="3"
                    ng-model="adjacent" 
                    ng-init="adjacent = 2"/>
            </div>
            <hr/>
            <span class="btn btn-default" onclick="location.reload()"> 
                <span title="Reset Settings" class="glyphicon glyphicon-repeat"></span>
            </span>
            <span class="btn btn-success" ng-click="currentPage = 0">
                Apply Settings
            </span>
        </div>
        <script src="https://gist.github.com/brantwills/cff9b8259cb8b1364e8e.js"></script>
        <hr/>



                
        <h3> Boolean Flag Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>By default all flags are set to false</li>
            <li>Many of the settings will apply to other samples on this page</li>
        </ul>
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                disabled="{{isDisabled}}"
                scroll-top="{{scrollTop}}" 
                hide-if-empty="{{hideIfEmpty}}"
                show-prev-next="{{showPrevNext}}"
                show-first-last="{{showFirstLast}}">
            </paging>   
        </div>
        <div class="well">
            <table> 
                <tr>
                    <td><label>Is Disabled:</label></td>
                    <td>
                        <input
                            type="checkbox"
                            ng-model="isDisabled" 
                            ng-init="isDisabled = true"/>
                        {{isDisabled}}
                    </td>
                </tr>
                <tr>
                    <td><label>Hide if Empty:</label></td>
                    <td>
                        <input
                            type="checkbox"
                            ng-model="hideIfEmpty" 
                            ng-init="hideIfEmpty = true"/>
                        {{hideIfEmpty}}
                    </td>
                </tr>
                <tr>
                    <td><label>Scroll Top:</label></td>
                    <td>
                        <input
                            type="checkbox"
                            ng-model="scrollTop" 
                            ng-init="scrollTop = true"/>
                        {{scrollTop}}
                    </td>
                </tr>
                <tr>
                    <td><label>Show Prev Next:</label></td>
                    <td>
                        <input
                            type="checkbox"
                            ng-model="showPrevNext" 
                            ng-init="showPrevNext = true"/>
                        {{showPrevNext}}
                    </td>
                </tr>
                <tr>
                    <td><label>Show First Last:</label></td>
                    <td>
                        <input
                            type="checkbox"
                            ng-model="showFirstLast" 
                            ng-init="showFirstLast = true"/>
                        {{showFirstLast}}
                    </td>
                </tr>
            </table>
            <span class="btn btn-default" onclick="location.reload()"> 
                <span title="Reset Settings" class="glyphicon glyphicon-repeat"></span>
            </span>
            <span class="btn btn-success" ng-click="currentPage = 0">
                Apply Settings
            </span>
        </div>              
        <script src="https://gist.github.com/brantwills/8fcd86a03332cab5cd9b.js"></script>
        <hr/>








        
        <h3> Text and Title Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>The text <code>{page}</code> will insert the page number in all the text title page attribute</li>
        </ul>
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                text-first="{{textFirst}}"
                text-last="{{textLast}}"
                text-next="{{textNext}}"
                text-prev="{{textPrev}}"
                text-title-page="{{textTitlePage}}"
                text-title-first="{{textTitleFirst}}"
                text-title-last="{{textTitleLast}}"
                text-title-next="{{textTitleNext}}"
                text-title-prev="{{textTitlePrev}}"
                show-prev-next="true"
                show-first-last="true">
            </paging>   
        </div>
        <div class="well">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Text First:</label> 
                        <input
                            placeholder="Text First" 
                            class="form-control" 
                            maxlength="10"
                            ng-model="textFirst" 
                            ng-init="textFirst = 'first'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Previous:</label> 
                        <input
                            placeholder="Text Previous" 
                            class="form-control" 
                            maxlength="10"
                            ng-model="textPrev" 
                            ng-init="textPrev = 'prev'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Next:</label> 
                        <input
                            placeholder="Text Next" 
                            class="form-control" 
                            maxlength="10"
                            ng-model="textNext" 
                            ng-init="textNext = 'next'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Last:</label> 
                        <input
                            placeholder="Text Last" 
                            class="form-control" 
                            maxlength="10"
                            ng-model="textLast" 
                            ng-init="textLast = 'last'"/>
                    </div>
                    <br/>
                    <div class="visible-md visible-lg">
                        <span class="btn btn-default" onclick="location.reload()"> 
                            <span title="Reset Settings" class="glyphicon glyphicon-repeat"></span>
                        </span>
                        <span class="btn btn-success" ng-click="currentPage = 0">
                            Apply Settings
                        </span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Text Title Page:</label> 
                        <input
                            placeholder="Text Title Page" 
                            class="form-control" 
                            maxlength="20"
                            ng-model="textTitlePage" 
                            ng-init="textTitlePage = 'Page {page} hover'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Title First:</label> 
                        <input
                            placeholder="Text Title First" 
                            class="form-control" 
                            maxlength="20"
                            ng-model="textTitleFirst" 
                            ng-init="textTitleFirst = 'First hover'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Title Previous:</label> 
                        <input
                            placeholder="Text Title Previous" 
                            class="form-control" 
                            maxlength="20"
                            ng-model="textTitlePrev" 
                            ng-init="textTitlePrev = 'Prev hover'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Title Next:</label> 
                        <input
                            placeholder="Text Title Next" 
                            class="form-control" 
                            maxlength="20"
                            ng-model="textTitleNext" 
                            ng-init="textTitleNext = 'Next hover'"/>
                    </div>
                    <div class="form-group">
                        <label>Text Title Last:</label> 
                        <input
                            placeholder="Text Title Last" 
                            class="form-control" 
                            maxlength="20"
                            ng-model="textTitleLast" 
                            ng-init="textTitleLast = 'Last hover'"/>
                    </div>
                    <br/>
                    <div class="visible-xs visible-sm">
                        <span class="btn btn-default" onclick="location.reload()"> 
                            <span title="Reset Settings" class="glyphicon glyphicon-repeat"></span>
                        </span>
                        <span class="btn btn-success" ng-click="currentPage = 0">
                            Apply Settings
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://gist.github.com/brantwills/7190f5e3d4165660475d.js"></script>
        <hr/>


        <h3> CSS First Last, Next Prev Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>Using Bootstraps glyphicons css by default</li>
        </ul>
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                hide-if-empty="{{hideIfEmpty}}"
                ul-class="{{ulClass}}"
                active-class="{{activeClass}}"
                disabled-class="{{disabledClass}}"
                show-prev-next="{{showPrevNext}}"
                show-first-last="{{showFirstLast}}"
                text-next-class="{{textNextClass}}"
                text-prev-class="{{textPrevClass}}"
                text-first-class="{{textFirstClass}}"
                text-last-class="{{textLastClass}}">
            </paging>   
        </div>
        <div class="well">
            <div class="form-group">
                <label>Next Class:</label> 
                <input
                    placeholder="pagination" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="textNextClass" 
                    ng-init="textNextClass = 'glyphicon glyphicon-chevron-right'"/>
            </div>
            <div class="form-group">
                <label>Previous Class:</label> 
                <input
                    placeholder="pagination" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="textPrevClass" 
                    ng-init="textPrevClass = 'glyphicon glyphicon-chevron-left'"/>
            </div>
            <div class="form-group">
                <label>First Class:</label> 
                <input
                    placeholder="pagination" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="textFirstClass" 
                    ng-init="textFirstClass = 'glyphicon glyphicon-backward'"/>
            </div>
            <div class="form-group">
                <label>Last Class:</label> 
                <input
                    placeholder="pagination" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="textLastClass" 
                    ng-init="textLastClass = 'glyphicon glyphicon-forward'"/>
            </div>
            <hr/>
            <span class="btn btn-default" onclick="location.reload()"> 
                <span title="Reset Settings" class="glyphicon glyphicon-repeat"></span>
            </span>
            <span class="btn btn-success" ng-click="currentPage = 0">
                Apply Settings
            </span>
        </div>
        <script src="https://gist.github.com/brantwills/eb41588c8a5a34f18e4d.js"></script>
        <hr/>





        <h3> CSS List Item Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>Using Bootstraps paging css by default</li>
            <li>Disabed class is applied to the dots item</li>
        </ul>
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                hide-if-empty="{{hideIfEmpty}}"
                ul-class="{{ulClass}}"
                active-class="{{activeClass}}"
                disabled-class="{{disabledClass}}"
                show-prev-next="{{showPrevNext}}"
                show-first-last="{{showFirstLast}}">
            </paging>   
        </div>
        <div class="well">
            <div class="form-group">
                <label>UL Class:</label> 
                <input
                    placeholder="pagination" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="ulClass" 
                    ng-init="ulClass = 'pagination'"/>
            </div>
            <div class="form-group">
                <label>Active Class:</label> 
                <input
                    placeholder="active" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="activeClass" 
                    ng-init="activeClass = 'active'"/>
            </div>
            <div class="form-group">
                <label>Disabled Class:</label> 
                <input
                    placeholder="disabled" 
                    class="form-control" 
                    maxlength="100"
                    ng-model="disabledClass" 
                    ng-init="disabledClass = 'disabled'"/>
            </div>
            <hr/>
            <span class="btn btn-default" onclick="location.reload()"> 
                <span title="Reset Settings" class="glyphicon glyphicon-repeat"></span>
            </span>
            <span class="btn btn-success" ng-click="currentPage = 0">
                Apply Settings
            </span>
        </div>
        <script src="https://gist.github.com/brantwills/9e1cc709c78c0fb3d16d.js"></script>
        <hr/>






        <h3> Reference Links </h3>
        <ul class="list-unstyled"> 
            <li>Github - <a target="_blank" href="https://github.com/brantwills/Angular-Paging">https://github.com/brantwills/Angular-Paging</a></li>
            <li>npm - <a target="_blank" href="https://www.npmjs.org/package/angular-paging">https://www.npmjs.org/package/angular-paging</a></li>
            <li>Brant Wills - <a target="_blank" href="http://brantwills.com">http://brantwills.com</a></li>
            <li>@brantwills - <a target="_blank" href="http://twitter.com/brantwills">http://twitter.com/brantwills</a></li>
        </ul>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="paging.js"></script>
</body>
</html>

